<template>
  <TopBar></TopBar>

  <div>
    <el-dialog v-model="dialogVisible" title="系统通知" width="500" :before-close="handleClose">
      <span>您还没有选择需要领取的农产品喔！现在去领取吧~</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="router.push('/fruitCentre')">
            前往领取
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <div class="game-container">
    <!-- Background Image -->
    <div class="background">
      <!-- Title -->
      <div class="title-container">
        <el-image class="farm_logo" src="https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/ziziFarm/ziziday.png"
          fit="cover"></el-image>
      </div>

      <div style="display:flex;text-align: center;align-items: center;justify-content: center;">
        <el-image class="tree" style="width: 40vh;"
          src="https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/ziziFarm/%E6%88%90%E9%95%BF4.png"></el-image>
      </div>

      <!-- Left Panel -->
      <div class="panel left-panel" :class="{ 'expanded': leftExpanded }">
        <div class="panel-frame-left">
          <div class="panel-content">
            <el-progress class="panel-progress" style="width: 60%;" :stroke-width="30" :percentage="desc.progress"
              color="green" />
            <div class="item_card">
              <el-image style="width: 100%;height: 100%;"
                :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${desc.itemImg}.jpg`"
                fit="cover"></el-image>
            </div>
            <div class="fun_card">
              <div style="display: flex;flex-direction: column;align-items: center;">
                <el-image @click="upWater(0)" class="fun_box" style="width: 18vh;"
                  src="https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/ziziFarm/%E6%B5%87%E6%B0%B4.png"></el-image>
                <span>今日免费浇水次数:{{ isWater }} /1</span>
              </div>
              <div style="display: flex;flex-direction: column;align-items: center;">
                <el-image @click="upWater(1)" class="fun_box" style="width: 18vh;"
                  src="https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/ziziFarm/%E6%94%B6%E8%8E%B7.png"></el-image>
                <span>拥有施肥次数:{{ desc.fertilizer }}次</span>
              </div>
            </div>
          </div>
          <button class="toggle-btn left-toggle" @click="toggleLeft">
            <div class="arrow-right" v-if="!leftExpanded"></div>
            <div class="arrow-left" v-else></div>
          </button>
        </div>
      </div>

      <!-- Right Panel -->
      <div class="panel right-panel" :class="{ 'expanded': rightExpanded }">
        <div class="panel-frame-right">
          <div class="panel-content">
            <div class="task_card">
              <div v-for="task in tasks" class="task_box">
                <div style="display:flex;flex-direction: column;padding: 2vh;">
                  <span style="font-weight:bolder;">{{ task.taskName }}</span>
                  <span style="font-size: 1.5vh;color: rgb(82, 82, 82);">任务完成可获得{{ task.fertilizerReward }}积分</span>
                </div>
                <el-button :icon="TopRight" type="success" round>前往</el-button>
              </div>
            </div>
          </div>
          <button class="toggle-btn right-toggle" @click="toggleRight">
            <div class="arrow-left" v-if="!rightExpanded"></div>
            <div class="arrow-right" v-else></div>
          </button>
        </div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import TopBar from '@/component/TopBar.vue'
import Footer from '@/component/Footer.vue'
import { ref, reactive, watch, nextTick, onMounted } from 'vue';
import router from '../../router/index.js';
import request from '../../utils/request';
import { ElNotification } from 'element-plus'
import {
  TopRight
} from '@element-plus/icons-vue'

//果蔬情况
const desc = ref({});

const leftExpanded = ref(false);
const rightExpanded = ref(false);

const toggleLeft = () => {
  leftExpanded.value = !leftExpanded.value
}

const toggleRight = () => {
  rightExpanded.value = !rightExpanded.value
}

const upWater = async (num) => {
  if (num == 0) {
    if (isWater.value == 0) {
      ElNotification({
        title: '失败',
        message: '今日已经浇过水喔',
        type: 'error',
      })
    }
    else if (isWater.value == 1) {
      await request.put('/api/ziziFarm/plant', null, {
        params: {
          uid: JSON.parse(sessionStorage.getItem('uid')),
          fertilizer: num
        }
      }).then(res => {
        ElNotification({
          title: '成功',
          message: '今日浇水成功',
          type: 'success',
        })
        GetDesc();
      })
    }
  }
  else {
    if (desc.value.fertilizer < num) {
      ElNotification({
        title: '失败',
        message: '肥料不足',
        type: 'error',
      })
    }
    else {
      await request.put('/api/ziziFarm/plant', null, {
        params: {
          uid: JSON.parse(sessionStorage.getItem('uid')),
          fertilizer: num
        }
      }).then(async res => {
        ElNotification({
          title: '成功',
          message: '施肥成功成功',
          type: 'success',
        })
       await GetDesc();
      })
    }
  }
  console.log(desc.value.progress);

  if(desc.value.progress>=100)
  {
    ElNotification({
          title: '成功',
          message: '恭喜您完成任务',
          type: 'success',
        })
        router.push(`/orderSubmit/${desc.value.itemID}&${"free"}`).then(() => {
        window.scrollTo(0, 0);
    })
  }

}

const isWater = ref();

const GetDesc = async () => {
  await request.get('/api/ziziFarm/desc', {
    params: {
      uid: JSON.parse(sessionStorage.getItem('uid'))
    }
  }).then(res => {
    desc.value = res.data;
    console.log("我是情况", desc.value);
    if (desc.value.water) {
      isWater.value = 0;
    }
    else {
      isWater.value = 1;
    }
  })
}

const tasks = ref({});

const GetTasks = () => {
  request.get('/api/ziziFarm/task', {
    params: {
      uid: JSON.parse(sessionStorage.getItem('uid'))
    }
  }).then(res => {
    tasks.value = res.data;
  })
}

const farmFlag = ref(false);

const IsFarm = async () => {
  await request.get('/api/ziziFarm/isFarm', {
    params: {
      uid: JSON.parse(sessionStorage.getItem('uid'))
    }
  }).then(res => {
    console.log("我是情况", res.data);
    if (res.data == "YesFarm") {
      farmFlag.value = true;
    }
    else {
      farmFlag.value = false;
    }
  })
}

const dialogVisible = ref(false)

const handleClose = () => {
  ElMessageBox.confirm('您确定需要关闭吗?此举将会导致无法领取农产品')
    .then(() => {
      router.push("/user")
    })
    .catch(() => {
      // catch error
    })
}

// 初始化加载
onMounted(async () => {
  await IsFarm();
  console.log("情况", farmFlag.value);
  if (farmFlag.value) {
    await GetDesc();
    await GetTasks();
  }
  else {
    dialogVisible.value = true;
    ElNotification({
      title: '失败',
      message: '请先领取农产品',
      type: 'error',
    })
  }
})

</script>

<style scoped>
.game-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.background {
  width: 100%;
  height: 100%;
  background-image: url('https://bu.dusays.com/2025/02/16/67b14417be375.png');
  /* 设置背景图 */
  background-size: cover;
  /* 让背景图覆盖整个页面 */
  background-repeat: no-repeat;
  /* 防止背景图重复 */
  position: relative;
}

.title-container {
  text-align: center;
}

.farm_logo {
  width: 22vw;
}

.main-title {
  font-size: 2.5rem;
  color: #8B4513;
}

.panel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease-out;
}

.left-panel {
  left: -30vw;
  transform: translateY(-50%);
}

.right-panel {
  right: -30vw;
  transform: translateY(-50%);
}

.left-panel.expanded {
  transform: translateX(30vw) translateY(-50%);
}

.right-panel.expanded {
  transform: translateX(-30vw) translateY(-50%);
}

.panel-frame-left {
  width: 30vw;
  height: 50vw;
  background: url('https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/ziziFarm/left.png') center/cover no-repeat;
  position: relative;
}

.panel-frame-right {
  width: 30vw;
  height: 50vw;
  background: url('https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/ziziFarm/right.png') center/cover no-repeat;
  position: relative;
}

.panel-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25vh;
  padding-left: 2vh;
  gap: 2vh;
}

.task_card {
  width: 65%;
  height: 80%;
  margin-left: -5vh;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.task_box {
  display: flex;
  width: 100%;
  height: 18%;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  background-color: #fbd6bc;
}

.fun_box {
  transition: all 0.3s ease-in-out;
}

.fun_box:hover {
  transform: scale(1.03);
}


.item_card {
  width: 60%;
  height: 45%;
  border-radius: 1vh;
  background-color: white;
}

.fun_card {
  display: flex;
}

.toggle-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5vw;
  height: 4vw;
  background: #8B4513;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-toggle {
  right: -2.5vw;
}

.right-toggle {
  left: -3.5vw;
}

.arrow-left,
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-width: 1.5vw transparent;
}

.arrow-left {
  border-right: 10px solid #FFF;
}

.arrow-right {
  border-left: 10px solid #FFF;
}

.panel-frame::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
}

.tree {
  width: 40vh;
  animation: treeAnimation 3s ease-in-out infinite;
  /* 添加动画 */
}

@keyframes treeAnimation {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(1.5deg);
  }

  40% {
    transform: rotate(-1.2deg);
  }

  60% {
    transform: rotate(1.0deg);
  }

  80% {
    transform: rotate(-0.8deg);
  }

  90% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}</style>